<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>http</title>
	<style>
		div{
			position:absolute;
		}
		#client{
			width:200px;
			height:100px;
			border:solid 1px blue;
			text-align:center;
			line-height:100px;
			top:300px;
			left:100px;
		}

		#server{
			width:200px;
			height:100px;
			border:solid 1px blue;
			text-align:center;
			line-height:100px;
			top:30px;
			right:100px;
		}

		#line-1{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:200px;
			left:300px;
		}
	
		#line-2{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:250px;
			left:300px;
		}

		.req{
			border-top:solid 2px #aea;
		}

		.res{
			border-top:solid 2px #eab;
		}

		#first-request{
			border:solid 2px #aea;
			padding:10px;
			left:120px;
			top:150px;
		}

		#first-response{
			border:solid 2px #eab;
			padding:10px;
			left:1000px;
			top:200px;
		}

		#line-3{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:900px;
			left:300px;
		}
	
		#line-4{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:950px;
			left:300px;
		}

		#second-request{
			border:solid 2px #aea;
			padding:10px;
			left:120px;
			top:850px;
		}

		#second-response{
			border:solid 2px #eab;
			padding:10px;
			left:1000px;
			top:900px;
		}

		#line-5{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:1400px;
			left:300px;
		}
	
		#line-6{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:1450px;
			left:300px;
		}

		#third-request{
			border:solid 2px #aea;
			padding:10px;
			left:120px;
			top:1350px;
		}

		#third-response{
			border:solid 2px #eab;
			padding:10px;
			left:1000px;
			top:1400px;
		}
		
		#line-7{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:1900px;
			left:300px;
		}
	
		#line-8{
			height:2px;
			transform:rotate(-12deg);
			width:780px;
			top:1950px;
			left:300px;
		}

		#four-request{
			border:solid 2px #aea;
			padding:10px;
			left:120px;
			top:1850px;
		}

		#four-response{
			border:solid 2px #eab;
			padding:10px;
			left:1000px;
			top:1900px;
		}
		#start{
			width:100px;
			height:50px;
			text-align:center;
			line-height:50px;
			border:solid 1px #ead;
			left:10px;
			top:10px;
			cursor:pointer;
		}
	</style>
</head>
<body style="height:auto;">
	<div id="start">开始</div>
	<div id="client">浏览器</div>
	<div id="server">服务器(apache,nginx,node)</div>
	
	<!-- 第一次请求 start -->
	<div id="line-1" class="req"></div>
	<div id="line-2" class="res"></div>
	
	<div id="first-request" style="display:none">
<pre>
GET /home HTTP/1.1
Host: www.atguigu.com
User-agent: firefox
refer: www.atguigu.com
</pre>
	</div>


	<div id="first-response" style="display:none">
<pre id="res-1">

</pre>
	</div>

	<!-- 第一次请求 end -->
	
	<!-- 第二次请求 start -->
	<div id="line-3" class="req"></div>
	<div id="line-4" class="res"></div>

	<div id="second-request" style="display:none">
<pre>
GET /css/index.css HTTP/1.1
Host: www.atguigu.com
User-agent: firefox
refer: www.atguigu.com
</pre>
	</div>


	<div id="second-response" style="display:none">
<pre id="res-2">

</pre>
	</div>
	<!-- 第二次请求 end -->
	

	<!-- 第三次请求 start -->
	<div id="line-5" class="req"></div>
	<div id="line-6" class="res"></div>

	<div id="third-request" style="display:none">
<pre>
GET /js/index.js HTTP/1.1
Host: www.atguigu.com
User-agent: firefox
refer: www.atguigu.com
</pre>
	</div>


	<div id="third-response" style="display:none">
<pre id="res-3">

</pre>
	</div>
	<!-- 第三次请求 end -->
	

	<!-- 第四次请求 start -->
	<div id="line-7" class="req"></div>
	<div id="line-8" class="res"></div>

	<div id="four-request" style="display:none">
<pre>
GET /images/welcome.jpg HTTP/1.1
Host: www.atguigu.com
User-agent: firefox
refer: www.atguigu.com
</pre>
	</div>


	<div id="four-response" style="display:none">
<pre id="res-4">

</pre>
	</div>
	<!-- 第四次请求 end -->
	<script src="./js/jquery.js"></script>
	<script>
		//first-request  start: {left: 120, top:150}  end {left: 850,top:10}
	var inte = null;

	$('#start').click(function(){
		$('#first-request').fadeIn(1000, function(){
			$(this).animate({
				left:'850px',
				top:'10px'
			}, 2000, function(){
				//first-response start: {left: 1000, top:200}  end {left:320, top:350}
				$('#first-response').fadeIn(1000, function(){
					$(this).animate({
						left:'320px',
						top:'350px'
					}, 2000, function(){
						$('#second-request').fadeIn(1000, function(){
							$(this).animate({
								left:'850px',
								top:'690px'
							}, 2000, function(){
								//first-response start: {left: 1000, top:200}  end {left:320, top:350}
								$('#second-response').fadeIn(1000, function(){
									$(this).animate({
										left:'320px',
										top:'1050px'
									}, 2000, function(){
									$('#third-request').fadeIn(1000, function(){
										$(this).animate({
											left:'850px',
											top:'1190px'
										}, 2000, function(){
											//first-response start: {left: 1000, top:200}  end {left:320, top:350}
											$('#third-response').fadeIn(1000, function(){
												$(this).animate({
													left:'320px',
													top:'1550px'
												}, 2000, function(){
													$('#four-request').fadeIn(1000, function(){
														$(this).animate({
															left:'850px',
															top:'1690px'
														}, 2000, function(){
															//first-response start: {left: 1000, top:200}  end {left:320, top:350}
															$('#four-response').fadeIn(1000, function(){
																$(this).animate({
																	left:'320px',
																	top:'2050px'
																}, 2000,function(){
																	clearInterval(inte);
																});
															});
														});
													});
												});
											});
										});
									});
								});
								});
							});
						});



					});
				});
			});
		});

		var i = 0;
		setTimeout(function(){
			inte = setInterval(function(){
				$(window).scrollTop(i++);
			},10)
		}, 3000);
	});

	
		
	function init() {
		var html_1 = `HTTP/1.1 200 OK
Server: Apache
Date: Mon, 13 Mar 2017 14:28:38 GMT
Content-Type: text/html;charset=utf-8
Connection: keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网站首页</title>
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/index.js"><\/script>
</head>
<body>
	<h3>欢迎来到尚硅谷</h3>
	<img src="/images/welcome.jpg" alt="">
</body>
</html>`
		$('#res-1').text(html_1);

		var html_2 = `HTTP/1.1 200 OK
Server: Apache
Date: Mon, 13 Mar 2017 14:28:38 GMT
Content-Type: text/css;charset=utf-8
Connection: keep-alive

body{
	background:orange
}
			`;
		$('#res-2').text(html_2);

		var html_3 = `HTTP/1.1 200 OK
Server: Apache
Date: Mon, 13 Mar 2017 14:28:38 GMT
Content-Type: text/javascript;charset=utf-8
Connection: keep-alive

alert('welcome to atguigu');
			`;
		$('#res-3').text(html_3);


		var html_4 = `HTTP/1.1 200 OK
Server: Apache
Date: Mon, 13 Mar 2017 14:28:38 GMT
Content-Type: image/jpeg
Connection: keep-alive

����JFIF��,Optimized by JPEGmini 3.11.4.3 0xc572c314
			`;
		$('#res-4').text(html_4);
	}

	init();
	</script>

</body>
</html>